<template>
  <div class="visitrecord">
    <soltTitle>
      <van-search
        v-model="value"
        shape="round"
        show-action
        placeholder="客户名称/拜访标题"
        readonly
        @click="skipQuery"
      >
        <template #action>
          <div @click="skipQuery" style="color:#1989fa">搜索</div>
        </template>
      </van-search>
    </soltTitle>
    <van-list v-model="loading" :finished="finished" @load="onLoad">
      <ul>
        <li class="card" v-for="item in arr" :key="item.id" @click="skipDetails(item.id)">
          <div class="card_l">
            <img src="../../assets/logo.png" alt />
            <ul>
              <li>
                <span>拜访标题:</span>
                {{item.visitReason}}
              </li>
              <li>
                <span>客户名称:</span>
                {{item.custName}}
              </li>
              <li>
                <span>拜访时间:</span>
                {{item.visitTime}}
              </li>
            </ul>
          </div>
          <div class="card_r">
            <van-tag color="#eca307" plain>定期回访</van-tag>
          </div>
        </li>
      </ul>
      <p @click="more">
        加载更多
        <span>∨</span>
      </p>
    </van-list>
  </div>
</template>

<script>
import soltTitle from "../../components/soltTitle";
import { GetDateAPI } from "../../request/api.js";

export default {
  data() {
    return {
      arr: [],
      loading: false,
      finished: false,
      refreshing: false,
      count: 1,
      value: "",
      pages: 0
    };
  },
  methods: {
    // 跳转页面
    skipDetails(id) {
      this.$router.push("/visitdetails/" + id);
    },
    // 下拉刷新触发
    onLoad() {
      if (this.refreshing) {
        this.refreshing = false;
      }
      this.loading = false;
      this.finished = true;
      this.count++;
      // this.GetAPIDate();
    },
    // 公用函数
    GetAPIDate(i) {
      GetDateAPI({
        keyword: i,
        current: 1,
        size: 10 * this.count
      }).then(res => {
        if (res.errCode == 0) {
          this.arr = res.data.records;
        }
      });
    },
    skipQuery() {
      this.$store.state.lastRouter = true;
      this.$router.push("/visitquery");
    },
    more() {
      alert("没有更多了");
    }
  },
  created() {
    if (this.$store.state.arr.length) {
      this.arr = this.$store.state.arr;
      console.log(this.arr);
    } else {
      this.GetAPIDate();
    }
  },
  components: {
    soltTitle
  }
};
</script>

<style scoped>
ol,
ul {
  margin-top: 10px;
}

.card {
  border-bottom: solid 1px #efefef;
  background-color: #fff;
  padding: 2%;
  height: 100px;
  display: flex;
}

.card > .card_r {
  flex: 2;
}

.card > .card_l {
  flex: 10;
  display: flex;
  font-size: 12px;
}

.card > .card_l > ul > li {
  margin: 0 5px 10px;
}

.card > .card_l > ul > li > span {
  color: #ccc;
  margin-right: 8px;
}

.card > .card_l > ul {
  margin: 5px 10px;
}

.card > .card_l > img {
  width: 70px;
  height: 70px;
  margin: auto 0;
}
.van-list p {
  background-color: #fff;
  margin-top: 0;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #1989fa;
}
.van-list p span {
  font-size: 24px;
  margin-right: 8px;
}
</style>